<template>
	<div class="container">
		<div class="person">
			<div class="person_1">
				<span>个人中心</span>
				<i class="fa fa-cog" aria-hidden="true"></i>
			</div>
			<router-link to="login">
				<div class="person_2">
					<img src="../../assets/images/personalpic_1.png" alt="" />
				</div>
			</router-link>
			<router-link to="login">
				<div class="person_3">
						<p>登录/注册</p>
						<p>注册送豪礼 , 登录有惊喜</p>
				</div>
			</router-link>
			<div class="person_4">
				<ul>
					<li class="person_4_1">
						<div>--</div>
						<div>
							<img src="../../assets/images/p_1.png"/>
							<span>我的余额</span>
						</div>
					</li>
					
					<li class="person_4_2">
						<div>--</div>
						<div>
							<img src="../../assets/images/p_2.png"/>
							<span>我的红包</span>
						</div>
					</li>
					
					<li class="person_4_3">
						<div>--</div>
						<div>
							<img src="../../assets/images/p_3.png"/>
							<span>我的积分</span>
						</div>
					</li>
					
				</ul>
			</div>
		</div>
		
		<div class="person_ms1">
			<ul>
				<li>
					<img src="../../assets/images/p_4.png"/>
					<span>开店赚钱</span>
					<img src="../../assets/images/p_11.png"/>
				</li>
				<hr />
				<li>
					<img src="../../assets/images/p_5.png"/>
					<span>身份认证</span>
					<img src="../../assets/images/p_11.png"/>
				</li>
			</ul>
		</div>
		<div class="person_ms2">
			<ul>
				<li>
					<img src="../../assets/images/p_6.png"/>
					<span>地址管理</span>
					<img src="../../assets/images/p_11.png"/>
				</li>
				<hr />
				<li>
					<img src="../../assets/images/p_7.png"/>
					<span>绑定手机</span>
					<img src="../../assets/images/p_11.png"/>
				</li>
			</ul>
		</div>
		<div class="person_ms3">
			<ul>
				<li>
					<img src="../../assets/images/p_8.png"/>
					<span>修改密码</span>
					<img src="../../assets/images/p_11.png"/>
				</li>
				<hr />
				<li>
					<img src="../../assets/images/p_9.png"/>
					<span>帮助中心</span>
					<img src="../../assets/images/p_11.png"/>
				</li>
				<hr />
				<li>
					<img src="../../assets/images/p_10.png"/>
					<span>关于宅米</span>
					<img src="../../assets/images/p_11.png"/>
				</li>
				
			</ul>
		</div>
			<v-footer></v-footer>

	</div>
	

</template>

<script>
	import vFooter from "../footer/footer";
	export default{
		components:{
			vFooter
		}
	}
</script>

<style scoped>
	.container{
		background-color:#f4f4f4;
		/*position: fixed;*/
		width:100%;
		height: 100%;
	}
	.person{
		height:6rem;
		background:#fff;
		display:flex;
		align-items:center;
		flex-direction:column;
		position: relative;
	}
	.person_1{
		display: flex;
		justify-content: space-between;
		padding-top:0.27027rem;
	}
	.person_1 span{
		font-size:0.432432rem;
		font-weight:bold;
	}
	.person_1 i{
		position: absolute;
		right:0;
		color:#ffbbd6;
		font-size:0.702702rem;
		padding-right:0.27027rem;
	}
	.person_2 img{
		width:1.655675rem;
		border-radius:50%;
		margin-top:0.802702rem;
	}
	.person_3{
		display:flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.person_3 p:first-child{
		font-size:0.348378rem;
		padding-top:0.11rem;
		font-weight:bold;
	}
	.person_3 p:last-child{
		font-size:0.3178rem;
		padding-top:0.14rem;
		color:#999;
	}
	.person_4{
		width:100%;
		padding-top:0.38648rem;
	}
	.person_4 ul{
		display:flex;
		justify-content: space-between;
		padding:0 0.756756rem;
	}
	.person_4 ul li{
		display:flex;
		align-items:center;
		flex-direction:column;
		border-right:0.027027rem solid #dedede;
		padding-right:0.69027rem;
	}
	.person_4 ul li:first-of-type{
		width:33%;
	}
	.person_4 ul li:nth-of-type(3){
		border:none;
	}
	.person_4 ul li div{
		display:flex;
	}
	.person_4 ul li div:first-of-type{
		color:#ff86a7;
		font-size:0.414324rem;
	}
	
	.person_4 ul li div span{
		color:#a8a4a3;
		font-size:0.331351rem;
	}
	
	/*信息一*/
	.person_ms1{
		height:2.459459rem;
		background:#fff;
		margin-top:0.27027rem;
	}
	.person_ms1 hr,
	.person_ms2 hr{
		width:96%;
		position: absolute;
		right:0;
	}
	.person_ms1 ul li,
	.person_ms2 ul li,
	.person_ms3 ul li
	{
		display:flex;
		height:1.216216rem;
		line-height:1.216216rem;
		justify-content: space-between;
		align-items:center;
		padding: 0 0.405405rem;
		position: relative;
	}
	.person_ms1 ul li span,
	.person_ms2 ul li span,
	.person_ms3 ul li span{
		font-size:0.364324rem;
		position: absolute;
		left:1.051351rem;
	}
	.person_ms1 ul li:first-child img:first-child{
		width:0.459459rem;
		height:0.486486rem;
	}
	.person_ms1 ul li:nth-of-type(2) img:first-child{
		width:0.459459rem;
		height:0.486486rem;
	}
	.person_ms1 ul li img:last-child,
	.person_ms2 ul li img:last-child,
	.person_ms3 ul li img:last-child
	{
		width:0.297297rem;
		height:0.459459rem;
	}
	
	/*信息二*/
	.person_ms2{
		height:2.459459rem;
		background:#fff;
		margin-top:0.27027rem;
	}
	.person_ms2 ul li:first-child img:first-child{
		width:0.378378rem;
		height:0.486486rem;
	}
	.person_ms2 ul li:nth-of-type(2) img:first-child{
		width:0.405405rem;
		height:0.486486rem;
	}
	
	/*信息三*/
	.person_ms3{
		height:3.702702rem;
		background:#fff;
		margin-top:0.27027rem;
	}
	.person_ms3 ul li img:first-child{
		width:0.405405rem;
		height:0.459459rem;
	}
	.person_ms3 ul li:last-child img:first-child{
		width:0.432432rem;
		height:0.486486rem;
	}
	.person_4_1 div img {
		width:0.378378rem;
		height:0.324324rem;
		padding-top:0.07081rem;
		padding-right:0.189189rem;
	}
	.person_4_2 div{
		margin-right:0.19189rem;
	}
	.person_4_2 div img{
		width:0.297297rem;
		height:0.351351rem;
		padding-top:0.054054rem;
		padding-right:0.189189rem;
	}
	.person_4_3 div img{
		width:0.432432rem;
		height:0.405405rem;
		padding-top:0.027027rem;
		padding-right:0.162162rem;
	}
</style>